<template>
  <div class="bottom-bar">
    <div class="check-content">
      <CheckButton class="check-button" ref='allCheckButton' :isChecked='isSelectAll' @click.native='checkClick'>
      </CheckButton>
      <span>全选</span>
    </div>
    <div class="price">
      合计:{{totalPrice}}
    </div>
    <div class="calculate" @click='goToCalc'>
      去结算({{checkedLength}})
    </div>
  </div>
</template>

<script>
  import CheckButton from 'components/content/checkButton/CheckButton'
  export default {
    name: '',
    data() {
      return {

      }
    },
    computed: {
      totalPrice() {
        return '¥' + this.$store.state.cartList.filter((item) => {
          return item.checked
        }).reduce((prev, item) => {
          return prev + item.count * item.price
        }, 0).toFixed(2)
      },
      checkedLength() {
        return this.$store.getters.cartList.filter(item => item.checked).length
      },

      /* 
        模型控制全选按钮的状态
      */
      isSelectAll() {
        // 全选的按钮状态 最开始没有商品的时候应该选择为false
        // 也就是在购物车有长度的时候 全选才有意义
        return !!this.$store.state.cartList.length && this.$store.getters.cartList.filter(item => item.checked == false).length === 0
      }
    },
    methods: {
      checkClick() {
        /* 
          点击全选实现全选或者全部选
          将自身的状态发送到Vuex中的mutations中,在mutations中实现对数据的修改(参照自身的状态)
        */
        this.$store.commit('allCheckClick', this.$refs.allCheckButton.isChecked)
      },
      goToCalc() {
        if (this.checkedLength === 0) {
          this.$toast.show('请选择添加的商品!')
        }
      }
    },
    components: {
      CheckButton
    }
  }
</script>

<style scoped>
  .bottom-bar {
    height: 40px;
    background-color: #eee;
    position: relative;
    display: flex;
    font-size: 14px;
  }

  .check-content {
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: 5px;
    width: 60px;
  }

  .check-button {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }

  .price {
    line-height: 40px;
    margin-left: 20px;
    flex: 1;
  }

  .calculate {
    line-height: 40px;
    background-color: orangered;
    color: #fff;
    width: 90px;
    text-align: center;
  }
</style>